/**
 * Created with IntelliJ IDEA.
 * User: Tung An
 * Date: 12/14/13
 * Time: 3:56 PM
 * To change this template use File | Settings | File Templates.
 */

var LookDetail = {

    isVisible: false,

    init: function () {
        this.show();
        this.getLookDetail();
        this.isVisible = true;
    },

    getLookDetail: function () {
        var success = function (resp) {
            var LookModel = LookManager.createLookModel(xmlUtils.XMLtoObj(resp).look);
            listTag = JSON.parse(JSON.stringify(LookModel.listTag));
            xmlUtils.setValue($id("look-detail"), LookModel);
            LookManager.createTagNode();
            LookDetail.createTagList(resp);
            LookDetail.bindTagEvent();
            LookDetail.getComment();
            if ($class("username")[0]) {
                $class("new-comment")[0].getElementsByTagName("img")[0].src = $class("account-wrappper")[0].getElementsByTagName("img")[0].src;
            }
        };

        var failure = function () {
        };

        ajax.post({
            url: "ProcessServlet",
            param: {action: "getlookdetail", lookId: xmlUtils.getURLParameter("look")},
            success: success,
            failure: failure
        });
    },

    bindTagEvent: function () {
        var tags = Array.prototype.slice.call($id("tag-container").children, 0);
        var clearTagDetail = function () {
            var tagDetails = Array.prototype.slice.call($id("tag-detail-list").children, 0);
            tagDetails.forEach(function (tagDetail) {
                removeClass(tagDetail, "active");
            });
        }

        var hover = function () {
            clearTagDetail();
            var index = parseInt(this.id.replace("tag-node-", ""), 10);
            addClass($id("tag-item-" + index), "active");
        }

        tags.forEach(function (tag) {
            tag.onmouseover = hover;
            tag.onmouseout = clearTagDetail;
        });

        $id("new-comment").onkeyup = LookDetail.newComment;
    },

    getComment: function () {
        var success = function (resp) {
            var userId = null;
            if ($class("username")[0] && $class("username")[0].id) {
                userId = $class("username")[0].id;
            }
            var html = xmlUtils.transformXSL(resp, "templates/comments.xsl", [
                {key: "userId", value: userId}
            ]);
            $id('comment-list').innerHTML = "";
            $id('comment-list').appendChild(html);
        };

        var failure = function () {
        };

        ajax.post({
            url: "CommentServlet",
            param: {action: "getComment", lookId: xmlUtils.getURLParameter("look")},
            success: success,
            failure: failure
        });
    },

    newComment: function (e) {
        if (e.keyCode === 13) {
            var data = {};

            data.userId = $class("username")[0].id;
            data.lookId = parseInt(xmlUtils.getURLParameter("look"), 10);
            data.commentId = "";
            data.content = this.value;
            data.updateTime = "";
            data.username = "";
            data.avatarurl = "";
            var comment = document.createElement("comments");
            var xmlDom = xmlUtils.objToXML(data, "comment");
            comment.appendChild(xmlDom);

            var success = function (resp) {
                var commentId = parseInt(resp.querySelector("commentid").textContent);
                var newComment = $id("comment-item-template").cloneNode(true);
                newComment.id = "comment-item-" + commentId;
                var commentObject = {};
                commentObject.username = $class("username")[0].children[0].textContent;
                commentObject.content = data.content;
                commentObject.updateTime = "moments ago";
                commentObject.avatarURL = $class("account-wrappper")[0].getElementsByTagName("img")[0].src;
                xmlUtils.setValue(newComment, commentObject);
                $id('comment-list').appendChild(newComment);
                $id("new-comment").value = "";
            };

            var failure = function () {

            };

            ajax.post({
                url: "CommentServlet",
                param: {action: "newComment"},
                xml: comment,
                success: success,
                failure: failure
            });

        }
    },

    deleteComment: function (node) {

        var commentId = parseInt(node.id.replace("comment-item-", ""));
        var success = function (resp) {
            node.remove();
        };

        var failure = function () {

        };
        ajax.post({
            url: "CommentServlet",
            param: {action: "deleteComment", commentId: commentId},
            success: success,
            failure: failure
        });
    },

    createTagList: function (xml) {
        var html = xmlUtils.transformXSL(xml, "templates/products.xsl");
        $id('tag-detail-list').innerHTML = "";
        $id('tag-detail-list').appendChild(html);
        var nodes = Array.prototype.slice.call($id("tag-detail-list").children, 0);
        var clearTag = function () {
            var tags = Array.prototype.slice.call($id("tag-container").children, 0);
            tags.forEach(function (tag) {
                removeClass(tag, "active");
            });
        }

        var hover = function () {
            clearTag();
            var index = parseInt(this.id.replace("tag-item-", ""), 10);
            addClass($id("tag-node-" + index), "active");
        }

        nodes.forEach(function (node) {
            node.onmousemove = hover;
            node.onmouseout = clearTag;
        });
    },

    initEdit: function (node) {
        LookDetail.oldComment = node.cloneNode(true);
        node.innerHTML = "";
        var commentId = parseInt(node.id.replace("comment-item-", ""));
        var editNode = $class("new-comment")[0].cloneNode(true);
        node.innerHTML = editNode.innerHTML;
        node.getElementsByTagName("input")[0].value = LookDetail.oldComment.getElementsByClassName("content")[0].innerText;

        var updateNode = function (e) {
            if (e.keyCode === 13) {
                var data = {};

                data.userId = $class("username")[0].id;
                data.lookId = parseInt(xmlUtils.getURLParameter("look"), 10);
                data.commentId = commentId;
                data.content = this.value;
                data.updateTime = "";
                data.username = "";
                data.avatarurl = "";
                var comment = document.createElement("comments");
                var xmlDom = xmlUtils.objToXML(data, "comment");
                comment.appendChild(xmlDom);

                var success = function (resp) {
                    LookDetail.oldComment.getElementsByClassName("content")[0].innerText = data.content;
                    LookDetail.oldComment.getElementsByClassName("update-time")[0].innerText = "moments ago"
                    node.innerHTML = LookDetail.oldComment.innerHTML;
                };

                var failure = function () {

                };

                ajax.post({
                    url: "CommentServlet",
                    param: {action: "newComment"},
                    xml: comment,
                    success: success,
                    failure: failure
                });

            }
        }

        node.getElementsByTagName("input")[0].onkeyup = updateNode;
    },

    onClick: function (event) {
        switch (event.target.data) {
            case "edit":
                var commentNode = getParentNode(event.target, "comment-item");
                LookDetail.initEdit(commentNode)
                break;
            case "delete":
                var commentNode = getParentNode(event.target, "comment-item");
                LookDetail.deleteComment(commentNode);
                break;
            default :
                break;
        }
    },

    show: function () {
        var listener = function (event) {
            var node = event.target;
            event.target.data = xmlUtils.getNodeWithData(node);
            LookDetail.onClick(event);
        };
        $id("look-detail").addEventListener("click", listener, false);
    }

};